<template>
  <!-- <div class="box">
            <router-link to="/Playing">
                <button>正在播放</button>
             </router-link>
             <router-link to="/Recommend">
                <button>推荐</button>
             </router-link>
             <router-link to="/Search">
                <button>搜索</button>
             </router-link>
             <router-link to="/Playlist">
                <button>我的歌单</button>
             </router-link>
             <router-link to="/History">
                <button>我听过的</button>
             </router-link>
    </div> -->
  <ul class="navlist">
    <li v-for="item in nav" :key="item.id" :class="currentRoute === item.route? 'active': ''"
      @click="goRoute(item.route)">
      {{item.text}}
    </li>
  </ul>
</template>
<script>
  export default {
    name: 'Menu',
    data() {
      return {
        nav: [{
            text: '正在播放',
            route: '/Playing'
          },
          {
            text: '推荐',
            route: '/Recommend'
          },
          {
            text: '搜索',
            route: '/Search'
          },
          {
            text: '我的歌单',
            route: '/Playlist'
          },
          {
            text: '播放历史',
            route: '/History'
          }
        ],
        currentRoute: '/Playing'
      }
    },
    methods: {
      goRoute(route) {
        this.currentRoute = route
        this.$router.push(route)
      }
    },
  }

</script>
<style scoped>
  ul {
    position: fixed;
    left: 0%;
    top: 10%;
  }

  li {
    border: 1.5px solid rgb(255, 255, 255, 0.6);
    border-radius: 5px;
    width: 100px;
    height: 30px;
    margin: 0px 10px 0px 0px;
    padding: 10px 0 0 0;
    background: transparent;
    color: rgb(255, 255, 255, 0.6);
    font-size: 16px;
    float: left;
    cursor: pointer;
    list-style: none;
  }

</style>
